<template>
  <div class="data-app-page">
    <div class="header bg f-c">
      <div class="nav-box f-s">
        <div class="header-content">
          <Navbar />
        </div>
      </div>
      <slot>
        <div class="nav-box2 f-g f-c j-a">
          <div class="f-c j-c a-c">
            <div class="title">数据工具</div>
            <div class="f-r a-c" style="height: 60px">
              <el-input v-model="searchParams.name" style="width: 600px">
                <el-button
                  slot="append"
                  style="width: 110px"
                  class="searchbtn"
                  type="primary"
                  @click="onSearch"
                >搜索</el-button>
              </el-input>
            </div>
          </div>
          <div class="count-box f-r j-b a-c">
            <div v-for="(item,index) in countList" :key="index" class="count-item">
              <div class="count">
                <CountTo
                  :start-val="0"
                  :end-val="item.value"
                  :duration="3000"
                />
              </div>
              <div class="count-name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </slot>
    </div>
    <div class="body-box">
      <div class="body">
        <div class="f-r a-c" style="padding: 30px 0">
          <div class="body-header-title">最新推荐</div>
          <div class="body-header-tool" @click="recommendChange">
            换一换
            <i class="el-icon-refresh" style="font-size: 18px; color: rgb(0, 0, 0);" />
          </div>
        </div>
        <el-row>
          <el-col v-for="(item,index) in recommend.tableData" :key="index" :span="8">
            <div class="block-item hvr-grow" @click="toDetail(item)">
              <div class="item tools">
                <div class="logo">
                  <img style="width: 390px;height: 213px" src="@/assets/shop/app-header-bg.png" alt="">
                </div>
                <div class="detail">
                  <div class="info">
                    <h2>{{ item.name }}</h2>
                    <div class="text">
                      {{ item.functionDesc }}
                    </div>
                    <div class="by f-r a-c ">
                      <span>服务商：</span>
                      <span>{{ item.serviceProviderName }}</span>
                    </div>
                    <div class="order f-r a-c j-b">
                      <div class="f-r a-c">
                        <span>
                          已订阅：{{ item.subCount }}次
                        </span>
                        <span>
                          评价：{{ item.evaluateCount }}条
                        </span>
                      </div>
                    </div>
                    <div class="star f-r a-c">
                      <el-rate v-model="item.evaluateScore" disabled />
                    </div>
                    <el-link @click.stop="toSubscribe(item)">申请订阅</el-link>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="body">
        <div class="f-r a-c" style="padding: 30px 0">
          <div class="body-header-title">热门工具</div>
          <div class="body-header-tool" @click="hotChange">
            换一换
            <i class="el-icon-refresh" style="font-size: 18px; color: rgb(0, 0, 0);" />
          </div>
        </div>
        <el-row>
          <el-col v-for="(item,index) in hot.tableData" :key="index" :span="8">
            <div class="block-item hvr-grow" @click="toDetail(item)">
              <div class="item tools">
                <div class="logo">
                  <img style="width: 390px;height: 213px" src="@/assets/shop/app-header-bg.png" alt="">
                </div>
                <div class="detail">
                  <div class="info">
                    <h2>{{ item.name }}</h2>
                    <div class="text">
                      {{ item.functionDesc }}
                    </div>
                    <div class="by f-r a-c ">
                      <span>服务商：</span>
                      <span>{{ item.serviceProviderName }}</span>
                    </div>
                    <div class="order f-r a-c j-b">
                      <div class="f-r a-c">
                        <span>
                          已订阅：{{ item.subCount }}次
                        </span>
                        <span>
                          评价：{{ item.evaluateCount }}条
                        </span>
                      </div>
                    </div>
                    <div class="star f-r a-c">
                      <el-rate v-model="item.evaluateScore" disabled />
                    </div>
                    <el-link @click.stop="toSubscribe(item)">申请订阅</el-link>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="footer">
      <div class="db-container">
        <div class="footer-item">
          <div class="footer-text">主板：xxx市政务服务数据管理局</div>
          <div class="footer-text">技术支持单位：xxx市大数据资源管理中心</div>
          <div class="footer-text">运营：xxx市XXXX科技发展集团有限公司</div>
        </div>
        <div class="footer-item" style="justify-content: center">
          <div class="footer-text">粵ICP备10001213213号码-7</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from '../layout/navbar'
import CountTo from 'vue-count-to'
import { http_shop, http_shop_tool } from '@/api'
export default {
  name: 'Index',
  components: {
    Navbar,
    CountTo
  },
  data() {
    return {
      countList: [
        { name: '已发布', value: 0 },
        { name: '近期发布', value: 0 },
        { name: '已订阅', value: 0 }
      ],
      searchParams: {
        name: ''
      },
      tableData: [
      ],
      recommend: {
        pageNo: 1,
        pageSize: 3,
        tableData: [],
        total: 0,
        handler: ''
      },
      hot: {
        pageNo: 1,
        pageSize: 6,
        tableData: [],
        total: 0,
        handler: ''
      }
    }
  },
  created() {
    http_shop.countTotal({
      businessType: 'tool'
    }).then(res => {
      this.countList[0].value = res.publishCount
      this.countList[1].value = res.recentPublishCount
      this.countList[2].value = res.subCount
    })
    this.onSearch()
  },
  methods: {
    onSearch() {
      this.recommend = {
        pageNo: 1,
        pageSize: 3,
        tableData: [],
        total: 0,
        handler: ''
      }
      this.hot = {
        pageNo: 1,
        pageSize: 6,
        tableData: [],
        total: 0,
        handler: ''
      }
      this.recommendChange()
      this.hotChange()
    },
    recommendChange() {
      const { pageNo, pageSize, handler, total } = this.recommend
      // 总数0 默认重置请求
      if (total === 0 || total <= pageSize) {
        this.recommend.pageNo = 1
        this.recommend.handler = ''
      } else {
        // 处理中
        if (handler) {
          // + 判断是否达到最大数据
          if (handler === '+') {
            if (pageNo * pageSize < total) {
              this.recommend.pageNo++
            } else {
              this.recommend.handler = '-'
              this.recommend.pageNo--
            }
          } else if (handler === '-') {
            if (pageNo > 1) {
              this.recommend.pageNo--
            } else {
              this.recommend.handler = '+'
              this.recommend.pageNo = 1
            }
          }
        } else {
          this.recommend.handler = '+'
        }
      }
      http_shop_tool.page({
        pageNum: this.recommend.pageNo,
        pageSize: this.recommend.pageSize,
        recommend: true,
        order: 'recommendTime',
        orderAsc: false
      }).then(res => {
        this.recommend.tableData = res.list
        this.recommend.total = res.total
      })
    },
    hotChange() {
      const { pageNo, pageSize, handler, total } = this.hot
      // 总数0 默认重置请求
      if (total === 0 || total <= pageSize) {
        this.hot.pageNo = 1
        this.hot.handler = ''
      } else {
        // 处理中
        if (handler) {
          // + 判断是否达到最大数据
          if (handler === '+') {
            if (pageNo * pageSize < total) {
              this.hot.pageNo++
            } else {
              this.hot.handler = '-'
              this.hot.pageNo--
            }
          } else if (handler === '-') {
            if (pageNo > 1) {
              this.hot.pageNo--
            } else {
              this.hot.handler = '+'
              this.hot.pageNo = 1
            }
          }
        } else {
          this.hot.handler = '+'
        }
      }
      http_shop_tool.page({
        pageNum: this.hot.pageNo,
        pageSize: this.hot.pageSize,
        order: 'subCount',
        orderAsc: false
      }).then(res => {
        this.hot.tableData = res.list
        this.hot.total = res.total
      })
    },

    toDetail(item) {
      this.$router.push({
        path: '/shop-tool-detail/' + item.id
      })
    },
    toSubscribe(item) {
      this.$router.push({
        path: '/shop-tool-subscribe/' + item.id
      })
    }
  }
}
</script>

<style lang="scss">
.data-app-page {
  .body-box {
    background-color: #e6ecf5;
    width: 100%;
    //background-image: url("~@/assets/externalurl.1664416195928.png");
    .page-box {
      border: none;
    }
    .body-header-title {
      width: 110px;
      font-size: 22px;
      font-weight: 700;
      color: #333;
    }
    .body-header-tool {
      width: 120px;
      color: #999;
      font-size: 16px;
      margin-top: 3px;
      cursor: pointer;
    }
  }
  .body {
    width: 1400px;
    margin: 0 auto;
    .block-item {
      overflow: hidden;
      border-radius: 5px;
      height: 610px;
      cursor: pointer;
      margin-bottom: 30px;
      .detail {
        position: absolute;
        padding-top: 40px;
        top: 108px;
        width: 350px;
        height: 433px;
        background: linear-gradient(180deg,#f2f5f7,#ffffff);
        border: 3px solid #ffffff;
        box-shadow: 0 5px 15px #a8acc04d;
        border-radius: 5px;
        left: 50%;
        transform: translateX(-50%);
        .by,
        .star{
          padding-bottom: 20px;
          border-bottom: 1px solid #4a5870;
        }

        .order {
         margin: 20px 0;
        }
        .info {
          padding-left: 30px;
          padding-right: 34px;
          color: #4a5870;
          font-size: 16px;
          .h2 {
            width: 100%;
            color: #16181a;
            font-size: 26px;
            margin-bottom: 30px;
            margin-top: 40px;
          }
          .text {
            color: #4a5870;
            font-size: 16px;
            margin-bottom: 70px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
          }
        }

        a {
          display: inline-block;
          margin-top: 25px;
          color: #3d72ff;
          font-size: 21px;
        }
      }
    }
  }
  .footer {
    width: 100%;
    background: #e6ecf5;
    height: 100px;
    padding: 23px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .footer-item {
      width: 730px;
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      .footer-text {
        font-size: 12px;
        color: #7a7a7a;
      }
    }
  }
  .header {
    width: 100%;
    background-image: url("~@/assets/shop/head.jpg");
  }
  .nav-box {
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  }
  .header-content {
    width: 1400px;
    margin: 0 auto;
    padding: 20px 0;
  }
  .nav-box2 {
    width: 1400px;
    height: 350px;
    margin: 0 auto;
    .el-input,
    .el-button {
      height: 60px;
      .el-input__inner {
        height: 60px;
        line-height: 60px;
      }
    }
    .title {
      font-size: 48px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      margin-bottom: 34px;
      font-style: oblique;
    }
    .record-list {
      height: 19px;
      cursor: pointer;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 21px;
      span {
        position: relative;
        padding-right: 40px;
      }
      span::after {
        position: absolute;
        content: " ";
        height: 16px;
        width: 1px;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        margin: 0 15px;
        background-color: #ffffff;
      }
      span:last-child:after {
        display: none;
      }
    }
    .el-input-group__append,
    .el-button {
      color: #ffffff !important;
      background-color: #0052d9 !important;
      border-color: #0052d9 !important;
    }
  }
  .count-box {
    margin:0 auto;
    width: 750px;
    .count-item {
      .count {
        font-size: 36px;
        color: #fff;
        line-height: 36px;
        text-align: center;
      }
      .count-name {
        color: #cfd6e6;
        font-size: 18px;
        margin-top: 18px;
        text-align: center;
      }
    }
  }
}
</style>
